<template>
  <el-table :data="list" border fit highlight-current-row style="width: 100%">
    <el-table-column
      v-loading="loading"
      align="center"
      label="rid"
      width="65"
      element-loading-text="请给我点时间！"
    >
      <template slot-scope="scope">
        <span>{{ scope.row.id }}</span>
      </template>
    </el-table-column>


    <el-table-column min-width="300px" label="title">
      <template slot-scope="{row}">
        <span>{{ row.title }}</span>
        <el-tag>{{ row.type }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column width="110px" align="center" label="filepath">
      <template slot-scope="scope">
        <span>{{ scope.row.author }}</span>
      </template>
    </el-table-column>

    <el-table-column align="center" label="uid" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.pageviews }}</span>
      </template>
    </el-table-column>



    <el-table-column class-name="status-col" label="tid" width="110">
      <template slot-scope="{row}">
        <el-tag :type="row.status | statusFilter">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      loading: false, // 控制加载状态的变量，这里假设为 false
      list: [
        {
          id: 1,
          title: "任务1",
          author: "John Doe",
          pageviews: 256,
          status: "Published"
        },
        {
          id: 2,
          title: "任务2",
          author: "Jane Smith",
          pageviews: 512,
          status: "Draft"
        },
        {
          id: 3,
          title: "任务3",
          author: "Michael Brown",
          pageviews: 128,
          status: "Published"
        }
      ]
    };
  }
};
</script>


